<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/nali.css" />

	</head>
	<body>
		<div id="index">
			<!-- 网页头部 -->
			<div id="header">
				<div id="header-conter">
					<ul class="ulOne">
						<li class="ulOne-lione">
							<img src="./img/bgloog.png" class="bgimglogo">
							<h3>网络全案营销服提供商</h3>
						</li>

					</ul>
					<ul class="ulthree">
						<li><a href="http://10.35.164.153/day4/index.html"><span class="floatleft">网站首页</span>
							</a></li><!-- href="" -->
						<!-- href="" -->
						<!--  -->
						<!-- href="" -->
						<li><a><span class="floatleft">传悦资源</span> </a></li>
						<li class="bgred"><a><span class="floatleft">传悦案例</span></a></li>
						<li><a href="http://10.35.164.153/day4/jiejuList.html"><span class="floatleft">解决方案</span> </a></li>
						<li><a><span class="floatleft">需求提高</span> </a></li>
					</ul>
					<ul class="ulTwo">
						<li><img src="./img/photo.png"><span style="color: #636363; margin-left: 10px; font-size: 17px;">0535-60652189</span></li>
						<li><a href=""><img src="./img/qq.png"></a></li>
						<li><a href=""><img src="./img/weibo.png"></a></li>
						<li><a href=""><img src="./img/weixin.png"></a></li>
						<li><a href=""><img src="./img/Email.png"></a></li>
					</ul>
				</div>

			</div>
			<div id="firstbgimg">
				<div id="firstbgimg-con">
					<div class="firstbgimg-con">
						<span>网站首页</span>
						<span><img src="img/tiaozhaunjiantouright.png"></span>
						<span>传悦案例</span>
					</div>
				</div>
			</div>
			<!--------内容---->
			<div id="nalist">
				<div id="nalist-con">
					<ul class="nalist-confirst">
						<li class="nalist-confirst_first">全部</li>
						<li>网站建设</li>
						<li>推广运营</li>
						<li>品牌策划</li>
						<li>网络全案</li>
					</ul>
					<div class="anLiLists">
						<!-- http://10.35.164.153/day4/anlixiangqing.html -->
						<a id="dis"  href="">
							<dl class="anLiLists-list">
								<dt></dt>
								<dd></dd>
							</dl>
						</a>
						<div id="displaynonelook"></div>
					</div>
					<div id="" class="lunbo">
						<ul>
							<li>&lt;</li>
							<li>1</li>
							<li class="bgColor">2</li>
							<li>3</li>
							<li>4</li>
							<li>&gt;</li>
						</ul>
					</div>

					<div id="displaynonelook"></div>
				</div>
			</div>
			<!--------结尾----------------->
			<div id="laster">
				<div id="laster-con">
					<div class="laster-first">
					</div>
					<div class="laster-last">
						<ul class="laster-lastone">
							<li>关于传悦</li>
							<li> 新闻动态 </li>
							<li>传悦观点</li>
							<li>联系传悦</li>
							<li>加入传悦</li>
							<li>付款账户</li>
						</ul>
						<ul class="laster-lasttwo">
							<li>Copyright ©2013</li>
							<li>创梦网络科技有限责任公司</li>
							<li>‖</li>
							<li> 传悦</li>
							<li>Chnyoo.cn All Rights Reserved</li>
							<li>京ICP备12005221号</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	//获取id ，类名的封装方法
	function indexId(index) {
		let number = document.querySelectorAll(index);
		if (number.length === 1) {
			return number[0];
		} else {
			return number;
		}
	}
	//点击那个那个变色-----------------------------------
	function fun(number) {
		console.log(number);
		for (let i = 0; i < indexId("#nalist #nalist-con .nalist-confirst li").length; i++) {
			indexId("#nalist #nalist-con .nalist-confirst li")[i].className = " ";
		}
		indexId("#nalist #nalist-con .nalist-confirst li")[number].setAttribute("class", "nalist-confirst_first")
	}
	//循环所有的导航的li------------------------------------
	for (let i = 0; i < indexId("#nalist #nalist-con .nalist-confirst li").length; i++) {
		indexId("#nalist #nalist-con .nalist-confirst li")[i].onclick = function() {
			fun(i);
		}	
	}

	//开始往后台发请求
	//发请求
	let http = new XMLHttpRequest();
	http.open("get", 'http://10.35.164.153:81/flightList');
	http.send();
	http.onreadystatechange = function() {
		if (http.readyState === 4) {
			let forjson = JSON.parse(http.responseText);
			forjson.forEach((item) => {
				let newTr = indexId("#nalist #nalist-con .anLiLists #dis").cloneNode(true);
				newTr.setAttribute("id", "");
				indexId(".anLiLists").appendChild(newTr);
		
				newTr.querySelector("dl dt").innerHTML = `${item.bgimg}`;
				newTr.querySelector("dl dd").innerHTML = `${item.bgh}${item.bgp}`;
				newTr.setAttribute("data-id",item.id);
				
				newTr.href =`anlixiangqing.html?id=${item.Id}`;
				

			})
		}
	}
</script>
